﻿<template>
  <el-dialog v-drag :title = 'dialogSelectTitle' :visible.sync = 'dialogSelectVisible' width='55%' :before-close = "handleClose"
  :close-on-click-modal = 'false'>
    <div class = 'page_searchContent'>
      <el-input :placeholder = 'searchNotice' v-model = 'searchKey' prefix-icon = "el-icon-search"></el-input>
    </div>
    <!-- 表格部分 -->
    <div class = 'page_tableContent'>
      <el-table :data = 'table.tableData' style = 'width:100%' stripe v-loading = 'loading'
      :row-key = "getRowKeys" ref = "multipleTable" border
      @selection-change = "handleSelectionChange">
        <el-table-column type = "selection" align = 'center' :reserve-selection = "true" width = "55"></el-table-column>
        <el-table-column align = 'center' v-for = 'item in table.tableColumn' :key = 'item.indexName' :label = 'item.text'>
          <template slot-scope = 'scope'>
            <span>{{scope.row[item.indexName]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部按钮和页码部分 -->
    <div class = 'page_bottomContent'>
      <div class = 'page_btnsContent'>
        <el-button type = 'info' @click = "$emit('giveUp')">取 消</el-button>
        <el-button type = "primary" @click = 'handleSubmit'>确 定</el-button>
      </div>
      <div class = 'page_paginationContent'>
        <el-pagination
        background
        @size-change = "handleSizeChange"
        @current-change = "handleCurrentPageChange"
        :current-page.sync = "currentPage"
        :page-size = 'pageSize'
        :pager-count = "5"
        :page-sizes = "[10, 25, 50, 100]"
        layout = "total, sizes, prev, pager, next"
        :total = 'totalLength'>
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['showDialog', 'roles'],
  data () {
    return {
      table: {
        tableData: [],
        tableColumn: []
      },
      dialogSelectVisible: false,
      dialogSelectTitle: '',
      searchKey: '',
      searchNotice: '',
      loading: true,
      isSearch: false,
      totalData: [],
      filterData: [],
      totalLength: 0,
      currentPage: 1,
      pageSize: 10,
      roleUsers: [],
      // 选中的登录账号
      selectUser: null
    }
  },
  methods: {
    // 获取该角色的的登录账号
    getRoleInfo () {
      if (this.roles) {
        this.$get('/roleauth/' + this.roles).then(data => {
          if (data.data.result.code === 'success') {
            this.roleUsers = data.data.result.data.login
            this.selectUser = data.data.result.data.login.length
            this.getLoginUsers()
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    // 获取所有的登录账号
    getLoginUsers () {
      this.$get('/loginuser').then((data) => {
        this.loading = false
        if (data.status === 200) {
          this.totalData = []
          data.data.result.forEach(item => {
            if (this.$store.state.roleNo && this.$store.state.roleNo.indexOf('R999') !== -1) { // 超级管理员展示所有的
              this.totalData.push(item)
            } else {
              // 不显示超级管理员的账号信息
              let roles = item.roles ? item.roles.join(',') : ''
              if (!roles || roles.indexOf('R999') === -1) {
                this.totalData.push(item)
              }
            }
          })
          this.totalLength = this.totalData.length
          // 将页面的CheckBox取消选中
          this.$refs.multipleTable.clearSelection()
          // 调用方法进行页面渲染
          this.showData(this.totalData)
          // 如果该角色有对应的账号,需要选中
          if (this.roleUsers.length) {
            this.roleUsers.forEach(val => {
              this.$refs.multipleTable.toggleRowSelection(val, true)
            })
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 将页码与数据关联
    showData (myData) {
      // 渲染表格的数据存放在 this.tableData 中
      this.table.tableData = []
      if (myData.length) {
        let from = (this.currentPage - 1) * this.pageSize
        let to = this.currentPage * this.pageSize
        if (to > myData.length) {
          to = myData.length
        }
        for (; from < to; from++) {
          this.table.tableData.push(myData[from])
        }
      }
    },
    // 点击上部的X关闭弹窗时
    handleClose () {
      this.$emit('giveUp')
    },
    // 表格多选时
    getRowKeys (row) {
      return row.loginid
    },
    handleSelectionChange (rows) {
      this.selectUser = rows
    },
    // 点击确定按钮时
    handleSubmit () {
      this.$emit('sureSelect', this.selectUser)
    },
    // 底部页码的部分
    handleSizeChange (val) {
      this.pageSize = val
      // 需要判断是否是检索的数据
      if (this.isSearch) {
        this.showData(this.filterData)
      } else {
        this.showData(this.totalData)
      }
    },
    handleCurrentPageChange (val) {
      this.currentPage = val
      // 需要判断是否是检索的数据
      if (this.isSearch) {
        this.showData(this.filterData)
      } else {
        this.showData(this.totalData)
      }
    }
  },
  watch: {
    showDialog: {
      handler: function (val, oldVal) {
        this.dialogSelectVisible = val
        if (val) {
          // 将数据还原
          this.loading = true
          this.pageSize = 10
          this.currentPage = 1
          this.searchKey = ''
          this.selectUser = null
          this.getRoleInfo()
          this.searchNotice = '请输入账号名称'
          this.dialogSelectTitle = '选择登录账号'
          this.table.tableColumn = [
            {
              text: '登录账号',
              indexName: 'loginid'
            },
            {
              text: '用户类型',
              indexName: 'usertype'
            },
            {
              text: '用户编号',
              indexName: 'userno'
            }
          ]
        }
      },
      deep: true
    },
    // 搜索的功能
    searchKey: {
      handler: function (val, oldVal) {
        // 当检索的内容为空时需要将表格的内容还原
        if (this.$trim(val) === '') {
          this.pageSize = 10
          this.currentPage = 1
          this.totalLength = this.totalData.length
          this.isSearch = false
          // 调用方法进行页面渲染
          this.showData(this.totalData)
        } else {
          // 检索结果的数据存放在 this.filterData 中
          this.filterData = []
          this.totalData.forEach((value, index) => {
            if (value.loginid.indexOf(this.searchKey) !== -1) {
              this.filterData.push(value)
            }
          })
          this.isSearch = true
          this.currentPage = 1
          this.totalLength = this.filterData.length
          // 调用方法进行页面渲染
          this.showData(this.filterData)
        }
      },
      deep: true
    }
  }
}
</script>
